<template>
  <div class="main">
    <div class="search">
      <van-search
        v-model="value"
        background="#ff5555"
        placeholder="请输入城市名或拼音"
      />
    </div>
    <div class="dangqian">
      <span>当前定位</span>
      <van-row>
        <van-col span="5" @click="choseCity('北京市')">北京市</van-col>
        <van-col span="5" style="background-color: #fff"></van-col>
        <van-col span="5" style="background-color: #fff"></van-col>
      </van-row>

      <span>热门城市</span>
      <van-row>
        <van-col
          v-for="(item, index) in hotcityList1"
          :key="index"
          span="5"
          @click="choseCity(item)"
          >{{ item }}</van-col
        >
      </van-row>
      <van-row>
        <van-col
          v-for="(item, index) in hotcityList2"
          :key="index"
          span="5"
          @click="choseCity(item)"
          >{{ item }}</van-col
        >
      </van-row>
      <van-row>
        <van-col
          v-for="(item, index) in hotcityList3"
          :key="index"
          span="5"
          @click="choseCity(item)"
          >{{ item }}</van-col
        >
      </van-row>
      <!-- <van-row>
        <van-col span="5">北京市</van-col>
        <van-col span="5">上海市</van-col>
        <van-col span="5">深圳市</van-col>
      </van-row>
      <van-row>
        <van-col span="5">广州市</van-col>
        <van-col span="5">杭州市</van-col>
        <van-col span="5">南京市</van-col>
      </van-row>
      <van-row>
        <van-col span="5">苏州市</van-col>
        <van-col span="5">成都市</van-col>
        <van-col span="5">武汉市</van-col>
      </van-row> -->
    </div>
    <div class="table">
      <van-index-bar>
        <van-index-anchor
          v-for="(item, index) in cityData"
          :key="index"
          :index="item.initial"
        >
          <span>{{ item.initial }} </span>

          <van-cell
            v-for="(citem, cindex) in item.list"
            :key="cindex"
            :title="citem.name"
          />
        </van-index-anchor>
      </van-index-bar>
      <!-- <span v-for="(item,index) in cityData" :key="index" >{{item.initial}}</span> -->
    </div>
  </div>
</template>

<script>
import { city } from "./city.json";
import { getHouseByWord } from "../../api/index";
export default {
  name: "",
  data() {
    return {
      cityData: city,
      value: "",
      hotcityList1: ["北京市", "上海市", "深圳市"],
      hotcityList2: ["广州市", "杭州市", "南京市"],
      hotcityList3: ["苏州市", "成都市", "武汉市"],
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  mounted() {},
  methods: {
    async choseCity(item) {
      // 点击某城市，发送请求关键字获取到城市对应的房源列表，存入state（vuex），跳转到当前页
       let {data:{data:houses},status} = await getHouseByWord({ city: item });
      if(status!=200) return;
      this.$store.state.newhouseList = houses;
      this.$router.replace({name:'current'});
    },
  },
  filters: {},
  action() {
    this.cityData = cityData;
  },
};
</script>

<style scoped lang='less'>
.main {
  .search {
    .van-search__content {
      margin: 0 60px;
    }
  }
  .dangqian {
    margin: 20px;
    span {
      font-size: 30px;
    }
    .van-row {
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
      display: flex;
      justify-content: space-around;
      &::after {
        content: none;
      }

      .van-col {
        padding: 10px 20px;
        border-radius: 10px;
        background-color: #ebebeb;
        margin-bottom: 20px;
      }
    }
  }
  .table {
    span {
    }
  }
}
</style>